<template>
    <el-pagination
        v-if="total && total>0"
        :current-page="page.currentPage"
        :page-size="page.currentSize"
        @size-change="SizeChange"
        @current-change='PageChange'
        layout="total,sizes, prev, pager, next, jumper"
        :total="total"></el-pagination>
</template>

<script>
export default {
    name: 'pagination',
    props: {
        loadDataMethod: {
            type: Function,
            required: true
        }
    },
    data() {
        return{
            total: 0,
            page: {
                currentSize: 20,
                currentPage: 1
            }
        }
    },
    mounted() {
        this.loadData()
    },
    methods: {
        async loadData() {
            let data = await this.loadDataMethod(this.page.currentPage, this.page.currentSize)
            console.log(data)
            this.total = data.total;
        },
        SizeChange(size){
            this.page.currentSize = size;
            this.PageChange(1);
        },
        PageChange(page){
            this.page.currentPage = page;
            this.loadData();
        },
    }
}
</script>